<script setup>
import { ref, reactive, getCurrentInstance, onMounted, watch, nextTick, h, markRaw, toRaw, onBeforeUnmount } from "vue"
import { globalStore } from "@/store/global"
import {treeData} from './demo.js'
import treeTransfer from '@/components/TreeTransfer'


const that = getCurrentInstance(); // vue2中的this
const globalVue = globalStore()
// 生命周期
onMounted(async () => {
  treeOrganizationSelect.value = formatTree(treeData, 1)
  console.log(treeOrganizationSelect.value, '=数据');
})

const treeOrganizationSelect = ref([])
const toData = ref([])

function formatTree(treeData, zoom, key) {
  let treeArr = []
  treeData.forEach(i => {
    let item = {}
    item.label = i.name
    item.value = i.id || i.type
    if(key) {
      item.key = key + '_' + item.value
    }else{
      item.key = item.value
    }
    item.zoom = zoom || 0
    if (i.city) {
      item.city = i.city
      item.type = i.type
    }
    i.list && (item.children = formatTree(i.list, zoom + 1, item.key))
    treeArr.push(item)
  })
  return treeArr
}

function logData() {
  console.log(toData);
}
</script>

<template>
  <div class="content">
    <treeTransfer v-model="toData" :data="treeOrganizationSelect"></treeTransfer>
  </div>
  <el-button @click="logData">打印右边数据</el-button>
</template>

<style scoped lang="less">
.content {
  width: 100%;
  height: 100%;
  .com {
    width: fit-content;
    margin: 200px auto 0;
    background-color: #f1f1f1;
  }
}
</style>